<template>
    <div>
        <el-dialog :destroy-on-close="true"
                   :title="isAddPage?'添加应用':'修改应用'"
                   :close-on-click-modal="false"
                   @close="closeDialog"
                   :visible="visible"
                   width="400px">
            <el-form ref="formRef" :model="form" :rules="rules"  label-width="120px" >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="应用名称"  prop="appName">
                                <el-input v-model="form.appName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="应用编码"  prop="appCode">
                                <el-input v-model="form.appCode"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="基础地址"  prop="baseUrl">
                                <el-input v-model="form.baseUrl"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                    <el-col :span="24">
                        <el-form-item label="展现方式"  prop="frame">
                            <el-select v-model="form.frame" filterable  clearable class="w100"   >
                                <el-option
                                        v-for="item in this.$constant.frameEnum"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row style="text-align: right">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">保存</el-button>
                        <el-button @click="closeDialog" >取消</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {
        },
        props: ['visible'],
        data() {
            return {
                isAddPage:true,
                originalAppCode:null,
                form: {

                },
                rules: {
                    appName: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                        { min: 2, max: 64, message: '长度在 2 到 64 个字符', trigger: 'blur' }
                    ],
                    appCode: [
                        { min: 2, max: 255, message: '长度在 2 到 255 个字符', trigger: 'blur' }
                    ],
                    frame: [
                        { required: true, message: '请输入数据', trigger: 'blur' },
                    ],
                }
            }
        },methods: {
            closeDialog() {
                this.$emit('update:visible',false);
                //Object.assign(this.$data, this.$options.data());
            },
            validatorAppCode(rule, value, callback){
                let _this=this;
                let url='/app/validateAppCode';
                let params={
                    originalNo:_this.originalAppCode,
                    newNo:value,
                };
                this.$utils.ajaxValidate(_this,url,params,value,callback);
            },

            submitForm(){
                let _this=this;
                let url='/app/save';
                if (!_this.isAddPage){
                    url='/app/update';
                }
                this.$utils.submitFormData(_this,_this.$refs.formRef,url,_this.form,function (valid) {
                    return valid;
                },function () {
                    _this.closeDialog();
                    _this.$emit('loadData', true);
                });
            },


            initData(row){
                this.isAddPage=true;
                this.form={
                }
                this.originalAppCode=null;
            },
            loadData(row){
                let _this=this;
                this.isAddPage=false;
                setTimeout(function(){
                    _this.$http.post('/app/getApp/'+row.id).then(function(res){
                        if(res.data.success){
                            _this.form=res.data.data;
                            _this.originalAppCode=JSON.parse(JSON.stringify(_this.form.appCode))
                        }else{
                            _this.$message.error('操作失败！错误编码:'+res.data.code+'错误原因:'+res.data.msg);
                        }
                    },function(e){
                        _this.$message.error('操作失败！'+e);
                    });
                }, 100);
            },

        }
    }

</script>
